<template>
  <section id="edit">
    <div>
      <Header style="margin-bottom:4.167vw" :user_img="userInfo.user_img" />
    </div>

    <div class="uploadBox">
      <van-uploader
        preview-size="100vw"
        :after-read="afterRead"
        class="upload"
      />
      <EditInfo left="头像">
        <img :src="userInfo.user_img" slot="right" v-if="userInfo.user_img" />
        <img src="@/assets/initialHead.jpeg" slot="right" v-else />
        <van-icon name="arrow" slot="icon" />
      </EditInfo>
    </div>

    <EditInfo left="昵称" @handleclick="nameClick">
      <span slot="right">{{ userInfo.name }}</span>
      <van-icon name="arrow" slot="icon" />
    </EditInfo>

    <EditInfo left="账号">
      <span slot="right">{{ userInfo.username }}</span>
    </EditInfo>

    <EditInfo left="性别" @handleclick="genderClick">
      <span slot="right">{{ userInfo.gender == 0 ? "女" : "男" }}</span>
      <van-icon name="arrow" slot="icon" />
    </EditInfo>

    <EditInfo left="个性签名" @handleclick="user_descClick">
      <span slot="right">{{ userInfo.user_desc }}</span>
      <van-icon name="arrow" slot="icon" />
    </EditInfo>

    <!-- 昵称修改 -->
    <van-dialog
      v-model="nameShow"
      title="昵称"
      show-cancel-button
      @cancel="name = ''"
      @confirm="confirmName"
    >
      <van-field v-model="name" placeholder="请输入昵称" autofocus="true" />
    </van-dialog>

    <!-- 性别修改 -->
    <van-action-sheet
      v-model="genderShow"
      :actions="actions"
      cancel-text="取消"
      @cancel="gender = ''"
      @select="confirmGender"
    />

    <!-- 个性签名修改 -->
    <van-dialog
      v-model="user_descShow"
      title="个性签名"
      show-cancel-button
      @cancel="user_desc = ''"
      @confirm="confirmUser_desc"
    >
      <van-field
        v-model="user_desc"
        rows="2"
        autosize
        type="textarea"
        maxlength="30"
        placeholder="请输入个性签名"
        show-word-limit
        autofocus="true"
      />
    </van-dialog>

    <div class="back" @click="$router.push('/userinfo')">返回个人中心</div>
    <div class="logout" @click="logout">退出登录</div>
  </section>
</template>

<script>
import Header from "@/components/common/Header.vue";
import EditInfo from "@/components/edit/EditInfo.vue";

export default {
  components: {
    Header,
    EditInfo,
  },
  data() {
    return {
      userInfo: {},
      name: "",
      gender: "",
      user_desc: "",
      nameShow: false,
      genderShow: false,
      actions: [{ name: "男" }, { name: "女" }],
      user_descShow: false,
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      let res = await this.$http.get(`/user/${localStorage.getItem("id")}`);
      this.userInfo = res.data[0];
    },
    async afterRead(File) {
      let formData = new FormData();
      // 后台规定键值对中的键为"file"
      formData.append("file", File.file);
      let res = await this.$http.post("/upload", formData);
      // 后台返回服务器图片地址res.data.url
      this.userInfo.user_img = res.data.url;
      this.updataUserInfo();
    },
    // 上传后端保存修改信息
    async updataUserInfo() {
      let res = await this.$http.post(
        `/update/${localStorage.getItem("id")}`,
        this.userInfo
      );
    },
    nameClick() {
      this.nameShow = true;
    },
    confirmName() {
      if (this.name == "") {
        return;
      }
      this.userInfo.name = this.name;
      this.updataUserInfo();
      this.name = "";
    },
    genderClick() {
      this.genderShow = true;
    },
    confirmGender(action) {
      action.name == "男" ? (this.gender = 1) : (this.gender = 0);
      this.userInfo.gender = this.gender;
      this.updataUserInfo();
      this.genderShow = false;
    },
    user_descClick() {
      this.user_descShow = true;
    },
    confirmUser_desc() {
      if (this.user_desc == "") {
        return;
      }
      this.userInfo.user_desc = this.user_desc;
      this.updataUserInfo();
      this.user_desc = "";
    },
    logout(){
      localStorage.clear();
      this.$router.replace("/login");
    }
  },
};
</script>

<style lang="less" scoped>
#edit {
  .uploadBox {
    position: relative;
    overflow: hidden;
    .upload {
      position: absolute;
      opacity: 0;
    }
    img {
      width: 15.278vw;
      height: 15.278vw;
      border-radius: 50%;
      display: block;
    }
  }
  .back{
    margin-top: 5.556vw;
    background-color: white;
    font-size: 4vw;
    text-align: center;
    padding: 4.167vw 0;
    color: #999;
  }
  .logout{
    border-top: 0.556vw solid #f4f4f4;
    background-color: white;
    font-size: 4vw;
    text-align: center;
    padding: 4.167vw 0;
    color: #999;
  }
}
</style>
